<!-- 饼形图组件 -->
<template>
  <div class="pie_box">
    <div id="pie_wrap"></div>
  </div>
</template>

<script>
// 引入 echarts
import * as echarts from "echarts";
// 引入 接口请求
import { getPieData } from "@/http/http";
export default {
  data() {
    return {
      myechart: "",
    };
  },
  mounted() {
    this.myechart = echarts.init(document.getElementById("pie_wrap"));
    getPieData().then((res) => {
      if (res.code == 200) {
        //给图表传参
        this.myechart.setOption(this.options(res.data.seriesData));
      }
    });
  },
  methods: {
    options(val) {
      let option = {
        title: {
          text: "千锋各学科人数占比",
        },
        legend: {
          right: 0,
          top: "30px",
          data: val.map((item) => {
            return item.name;
          }),
        },
        tooltip: {},
        series: [
          {
            type: "pie",
            radius: [0, "50%"],
            data: val,
          },
        ],
      };
      return option;
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
#pie_wrap {
  width: 100%;
  height: 500px;
}
</style>